<!-- 
  @author: zhengbw 
  @Date:2022-12-30
  @description: 查看流程环节人员抽屉
-->
<template>
  <a-drawer :width="drawerWidth" :visible="visible" @close="onClose" destroyOnClose>
    <span slot="title">{{ processName }}</span>
    <div class="card_font_title">
      <a-row type="flex" justify="space-around" align="middle">
        <a-col :span="10">
          候选用户
          <a-checkbox @change="changeCandidate" :checked="showCandidateUsers" style="padding: 0 8px"></a-checkbox>
          候选人
          <a-checkbox @change="changeAssignee" :checked="showAssignee"></a-checkbox>
        </a-col>

        <a-col :span="14">
          <div class="card_font_select">
            单位：
            <a-select
              :options="deptmentList"
              style="width: 50%"
              optionFilterProp="children"
              showSearch
              allowClear
              v-model="sectionid"
              @select="onSelect"
              placeholder="请选择受理单位"
            >
            </a-select>
            <a-button type="primary" @click="onSearch">查询</a-button>
          </div>
        </a-col>
      </a-row>
    </div>

    <div class="card_font_column">
      <div class="card_column_title">
        流程环节
        <a-divider type="vertical" style="width: 2px; height: 1.4em" />
      </div>
      <div :style="{ width: columnTitleLength }" style="display: inline-block">候选组</div>
      <div style="width: 15%; display: inline-block; margin-left: 2.4%" v-if="showCandidateUsers">
        <a-divider type="vertical" style="width: 2px; height: 1.4em" />
        候选用户
      </div>
      <div style="display: inline-block; width: 12.5%" v-if="showAssignee">
        <a-divider type="vertical" style="width: 2px; height: 1.4em" />
        候选人
      </div>
    </div>

    <a-spin tip="Loading..." :spinning="loading">
      <div class="container">
        <a-timeline>
          <a-timeline-item v-for="(item, index) in tasknameList" :key="item.index">
            <div class="_taskName">
              {{ item.taskname }} <br />
              <span style="color: #000">{{ item.documentation }}</span>
            </div>
            <a-row>
              <!-- 候选组列 -->
              <div v-if="taskUserList[index].candidateGroups">
                <a-col :span="spanLength">
                  <span v-for="a_item in taskUserList[index].candidateGroups" :key="a_item.index">
                    <span v-if="a_item && a_item.roleusers.length > 0">
                      <a-card :style="`margin-top: -${Math.ceil(item.length / 4) * 22.5 + 10}px`">
                        <div slot="title" class="cardTitle">{{ a_item.rolename }}</div>
                        <span v-for="(b_item, b_index) in a_item.roleusers" :key="b_index">
                          <a-list item-layout="vertical">
                            <a-list-item>
                              <div class="section_name_tag">
                                <div class="tag_concent">
                                  {{ b_item.sectionname }}
                                </div>
                              </div>
                              <div class="fontTheam">
                                {{ b_item.fullnames.join('、 ') }}
                              </div>
                            </a-list-item>
                          </a-list>
                        </span>
                      </a-card>
                    </span>
                  </span>
                </a-col>
              </div>
              <a-col :span="spanLength" v-else :style="`margin-top: -${Math.ceil(item.length / 4) * 15}px`">
                <a-tag color="red"> 未分配 </a-tag>
              </a-col>
              <!-- 候选用户 -->
              <div v-if="showCandidateUsers">
                <a-col :span="4" :offset="1">
                  <span v-if="taskUserList[index].candidateUsers && taskUserList[index].candidateUsers.length > 0">
                    <span v-for="(c_item, c_index) in taskUserList[index].candidateUsers" :key="c_index">
                      {{ c_item.fullnames }}
                      {{ c_item.deptnames }}
                    </span>
                  </span>
                  <a-col :span="4" :offset="1" v-else :style="`margin-top: -${Math.ceil(item.length / 4) * 15}px`"
                    ><a-tag color="red"> 未分配 </a-tag></a-col
                  >
                </a-col>
              </div>
              <!-- 候选人 -->
              <div v-if="showAssignee">
                <template v-if="taskUserList[index].assignee">
                  <a-col :span="3" :offset="showCandidateUsers ? 0 : 1">
                    <a-popover placement="bottom">
                      <template #content>
                        {{ taskUserList[index].assignee.sectionname }}
                      </template>
                      {{ taskUserList[index].assignee.fullname }}
                    </a-popover>
                  </a-col>
                </template>
                <a-col
                  :span="3"
                  :offset="showCandidateUsers ? 0 : 1"
                  v-else
                  :style="`margin-top: -${Math.ceil(item.length / 4) * 15}px`"
                >
                  <a-tag color="red"> 未分配 </a-tag></a-col
                >
              </div>
            </a-row>
          </a-timeline-item>
        </a-timeline>
      </div>
    </a-spin>
  </a-drawer>
</template>
<script>
import { findSectionList } from '@/api/base/ha_depart'
import '@/style/css/wf_procTaskUser.css'

export default {
  data () {
    return {
      loading: true, //遮罩
      taskUserList: [], //返回的所有数据
      showCandidateUsers: false, //候选用户显示
      showAssignee: false, //候选人显示
      visible: false, //是否显示抽屉
      deptmentList: [{ label: '全部', value: '', key: '' }], //部门
      sectionid: undefined, //部门id
      recordKey: '',
      tasknameList: [], //流程环节
      processName: null
    }
  },
  created () {
    this.listAlldeptmentList()
  },
  methods: {
    // 打开抽屉面板
    showDrawer (visible, processName) {
      this.visible = visible
      this.processName = processName
    },
    // 关闭抽屉面板
    onClose () {
      this.visible = false
      this.sectionid = null
      this.showAssignee = false
      this.showCandidateUsers = false
    },
    // 查询流程人员
    listProcTaskUser (key, sectionid) {
      const a = Date.now()
      this.loading = true
      this.recordKey = key
      queryTaskUsersByKey(key, this.sectionid ? this.sectionid : sectionid).then(res => {
        const b = Date.now()
        if (b - a < 400) {
          setTimeout(() => {
            this.loading = false
          }, 500)
        } else {
          this.loading = false
        }
        this.taskUserList = res.data
        this.tasknameList = []
        res.data.forEach(item => {
          // if (item.taskname.length > 4) {
          //   // 超长度的截取了,留给气泡展示
          //   this.tasknameList.push(item.taskname.substring(0, 4))
          // } else {
          //   this.tasknameList.push(item.taskname)
          // }
          this.tasknameList.push(item)
        })

        console.log('tasknameList', this.tasknameList)
        // console.log('taskUserList', this.taskUserList)
      })
    },
    // 切换候选用户列的显示状态
    changeCandidate () {
      this.showCandidateUsers = !this.showCandidateUsers
    },
    // 切换候选人列的显示状态
    changeAssignee () {
      this.showAssignee = !this.showAssignee
    },
    // 查询所有部门
    listAlldeptmentList () {
      findSectionList().then(res => {
        res.data.forEach(element => {
          let obj = { label: null, value: null, key: null }
          obj.label = element.name
          obj.value = element.id
          obj.key = element.sectionid
          this.deptmentList.push(obj)
        })
      })
      // console.log(this.deptmentList)
    },
    // 选择框选中
    onSelect (value) {
      this.sectionid = value
    },
    // 点击查询
    onSearch () {
      if (!this.sectionid) {
        this.sectionid = ''
      }
      this.listProcTaskUser(this.recordKey, this.sectionid)
    }
  },
  computed: {
    // 计算隐藏其他列时的候选组列长度
    spanLength: function () {
      return this.showAssignee && this.showCandidateUsers ? 15 : this.showAssignee || this.showCandidateUsers ? 18 : 23
    },
    drawerWidth: function () {
      return this.showAssignee && this.showCandidateUsers
        ? '45.5%'
        : this.showAssignee || this.showCandidateUsers
        ? '41.5%'
        : '37.5%'
    },
    columnTitleLength: function () {
      return this.showAssignee && this.showCandidateUsers
        ? '56%'
        : this.showAssignee || this.showCandidateUsers
        ? '66.6%'
        : '83.3%'
    }
  }
}
</script>

<style scoped>
/* 时间轴内容部分 */
::v-deep .ant-timeline-item {
  position: relative;
  font-size: 14px;
  list-style: none;
  min-height: 120px;
  margin: 0 0 0 70px;
  width: calc(100% - 48px);
}
/* 时间轴连接线条 */
::v-deep .ant-timeline-item-tail {
  border-left: 1.6px solid #0084ff;
}
/* 卡片头 */
::v-deep .ant-card-head {
  padding: 0 0;
  min-height: auto;
}
/* 卡片标题 */
::v-deep .ant-card-head-title {
  padding: 0 0;
}
::v-deep .ant-card-body {
  padding: 12px 20px;
  zoom: 1;
}
/* 分割线 */
::v-deep .ant-divider,
.ant-divider-vertical {
  height: calc(100% + 12px);
}
/* tag样式 */
::v-deep .ant-tag {
  color: #ff4f46;
  font-size: 15px;
  line-height: 29px;
  border: 1.6px dashed #ff4f46;
  border-radius: 4px;
  background-color: #ffffff;
}
/*antd抽屉*/
::v-deep .ant-drawer-body {
  padding: 0px;
}
::v-deep .ant-select-selection {
  border-radius: 4px 0 0 4px;
}
::v-deep .ant-btn {
  border-radius: 0 4px 4px 0;
}
::v-deep .ant-timeline-item-content {
  margin-left: 24px;
}
</style>
